<template>
	<view class="">
		<my-navbar
			:bgUrl="`${$imgurl}/static/order-bg.jpg`"
			title="我发起的抽奖"
			title-color="#fff"
			leftIconColor="#fff"
			:scrollTop="scrollTop"
			:autoBack="true"
		/>
		<view class="box title-box">
			<view class="tit">
				<view class="h1">
					吃菠萝前为什么要浸盐水?
				</view>
				<view class="status on" v-if="type==2">
					已破解
				</view>
				<view class="status off" v-if="type==1">
					已失效
				</view>
				<view class="status" v-if="type==0">
					未破解
				</view>
			</view>
			<view class="time">
				结束倒计时：
				<up-count-down
						:time="30 * 60 * 60 * 1000"
						format="HH:mm:ss"
						autoStart
						millisecond
						@change="onChange"
						>
					<view class="times">
						<view class="custom">
							{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}
						</view>
						<view class="custom">
							{{ timeData.minutes }}
						</view>
						<view class="custom">
							{{ timeData.seconds }}
						</view>
					</view>
				</up-count-down>
			</view>
			<view class="values">
				<view class="item">
					<view class="val">
						20
					</view>
					<view class="msg">
						参与人数
					</view>
				</view>
				<view class="item">
					<view class="val">
						20
					</view>
					<view class="msg">
						剩余礼物
					</view>
				</view>
			</view>
		</view>
		
		<view class="box goods-box">
			<view class="title">
				商品详情
				<view class="a">
					查看明细 <up-icon color="#9BA2AB" size="28rpx" name="arrow-right"></up-icon>
				</view>
			</view>
			<my-good-item />
			
		</view>
		<view class="box user-box">
			<view class="title">
				中奖用户
			</view>
			<my-user-list :list="[1,2,3,4]" />
		</view>
		<view class="box it-box">
			<view class="it">
				<view class="msg">订单信息</view>
			</view>
			<view class="it">
				<view class="msg">ID编号</view>
				<view class="val">
					631991409052911
				</view>
			</view>
			<view class="it">
				<view class="msg">发起时间</view>
				<view class="val">
					2025年09月04日14:38:58
				</view>
			</view>
		
		</view>
		<button class="box btn-box">
			<image :src="`${$imgurl}/static/icon-kf2.png`" mode=""></image> 联系客服
		</button>
	</view>
	
		
</template>

<script setup>
	import {ref} from "vue"
	import {onLoad,onPageScroll} from "@dcloudio/uni-app"
	const scrollTop=ref(0)
	onPageScroll((e)=>{
		if(e.scrollTop>=30){
			scrollTop.value=30
		}else{
			scrollTop.value=e.scrollTop/3
		}
	})
	const type=ref(0)
	// 使用 reactive 创建响应式对象  
	const timeData = ref({});  
	const userType=ref(0)
	// 定义 onChange 方法  
	const onChange = (e) => {  
	  timeData.value = e;  
	};  


</script>

<style lang="scss" scoped>
	page{
		background-color: #F5F6FA;
		position: relative;
		padding-bottom: 50rpx;
	}
	.content{
		::v-deep{
			.zp-view-super{
				background-color: #F5F6FA;
			}
		}
	}
	.title-box{
		margin-top:20rpx;
		padding:28rpx;
		border-radius: 20rpx;
		background-color: #fff;
		.values{
			margin-top:24rpx;
			background-color: #F7F8FA;
			border-radius: 8rpx;
			display: flex;
			padding: 30rpx 0;
			.item{
				flex: 1;
				text-align: center;
				line-height: 1;
				
				.val{
					font-size:36rpx;color:#242529;
					font-weight: bold;
				}
				.msg{
					color:#878787;
					font-size:26rpx;margin-top:16rpx;
				}
				&:nth-child(2){
					border-left:1rpx solid #DADADA;
					.val{
						color:#FF4A40;
					}
				}
			}
		}
		.tit{
			display: flex;
			.h1{
				font-weight: bold;
				flex:1;
				width: 600px;
				font-size: 32rpx;
			}
			.status{
				margin-left:20rpx;
				padding:0 16rpx;
				border-radius: 8rpx;
				font-size: 24rpx;
				font-weight: bold;
				line-height: 48rpx;
				background-color: #FFF2F0;
				color:#FF4A40;
				&.on{
					background-color: #EFF5FE;
					color:#199FFE;
				}
				&.off{
					background-color: #F5F6FA;
					color:#838A99;
				}
			}
			
		}
		.time{
			display: flex;
			padding:20rpx 0;
			align-items: center;
			font-size:28rpx;color:#141311;
			.times{
				display: flex;
				align-items: center;
				gap: 20rpx;
				.custom {
			        width: 36rpx;
			        height: 36rpx;
			        background-color: #FFE7E5;
			        border-radius: 4px;
			        justify-content: center;
			        align-items: center;
					text-align: center;
			        color: #FF4A40;
			        font-size: 22rpx;
					line-height: 36rpx;
					
			    }
			}
		}
	}
	.goods-box{
		padding:28rpx;
		background-color: #fff;
		margin-top:20rpx;
		border-radius: 20rpx;
		padding-bottom: 0;
		.title{
			display: flex;
			font-size: 32rpx;
			font-weight: bold;
			justify-content: space-between;
			.a{
				display: flex;align-items: center;font-size: 24rpx;
				color:#9BA2AB;
				font-weight: initial;
			}
		}
		
	}
	
	.it-box{
		background-color: #fff;
		border-radius: 20rpx;
		margin-top:20rpx;
		padding:22rpx 28rpx;
		
		.it{
			display: flex;line-height: 1;
			justify-content: space-between;
			padding:22rpx 0;
			position: relative;
			&:nth-child(1){
				border-bottom: 1rpx solid #EDEDED;
				margin-bottom: 10rpx;
				padding-bottom: 32rpx;
				.msg{
					font-size: 32rpx;
					font-weight: bold;
					
				}
			}
			.msg{
				font-size: 30rpx;
			}
			.val{
				font-size: 28rpx;
				color:#9A9A9A;
			}
			
		}
	}
	.btn-box{
		background-color: #fff;
		margin-top:20rpx;
		display: flex;
		height:104rpx;
		font-size: 28rpx;
		border-radius: 20rpx;
		justify-content: center;align-items: center;
		&:before,&::after{
			display: none;
		}
		image{
			width:40rpx;
			height:40rpx;
			margin-right:14rpx;
		}
	}
	
	.user-box{
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		margin-top:20rpx;
		.title{
			display: flex;
			font-size: 32rpx;
			font-weight: bold;
			justify-content: space-between;
			padding:28rpx;
			padding-bottom: 10rpx;
			.a{
				display: flex;align-items: center;font-size: 24rpx;
				color:#9BA2AB;
				font-weight: initial;
			}
		}
		::v-deep{
			.list-box{
				.btn{
					display: none;
				}
			}
			
		}
		
	}
</style>
